<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=1024, height=768" />
    <title>InteractiveBook</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/animate.css">

    <link rel="stylesheet" href="libs/jquery.mobile-1.3.1.css">
    <link rel="stylesheet" href="css/mainPage.css">

    <script src="libs/cordova-2.7.0.js"></script>
    <script src="libs/prototype.js"></script>
    <script src="libs/jquery-1.9.1.js"></script>

    <script>
        var $j = jQuery.noConflict();
    </script>
    <script src="libs/jquery.mobile-1.3.1.js"></script>
    <script src="libs/jquery.json-2.4.js"></script>

    <script src="classes/MyTools.js"></script>
    <script src="classes/Static.js"></script>
    <script src="classes/Global.js"></script>
    <script src="classes/Collections.js"></script>
    <script src="classes/Store.js"></script>
    <script src="classes/Favorite.js"></script>
    <script src="classes/Bookmark.js"></script>
    <script src="classes/Downloading.js"></script>

    <script src="classes/AnimateCSS.js"></script>
    <script src="classes/MyAttribute.js"></script>
    <script src="classes/MyAttributeList.js"></script>

    <script src="classes/MyElement.js"></script>
    <script src="classes/MyPage.js"></script>
    <script src="classes/MyBook.js"></script>
</head>
<body>

<!--Collection-->
<div data-role="page" id="collection">
    <!--Header-->
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#setting" data-icon="gear" class="ui-btn-left" data-transition="fade">Setting</a>
        <h1>Collections</h1>
        <a href="#collection-right-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-right" data-transition="fade">Menu</a>
    </div><!-- /header -->

    <!--Right Panel-->
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" id="collection-right-panel" data-theme="a">
        <ul data-role="listview" data-theme="a">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
            <li><a href="#bookmark" >Bookmark</a></li>
            <li><a href="#" >History</a></li>
            <li><a href="#favorite" >Favorite</a></li>
        </ul>
    </div>

    <!--Footer-->
    <div data-role="footer" data-id="myFooter" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#collection" class="ui-btn-active ui-state-persist">Collection</a></li>
                <li><a href="#store" data-transition="fade">Store</a></li>
            </ul>
        </div>
    </div>

    <!--Content-->
    <div data-role="content">
        <ul id="ib-collections-list" data-role="listview" data-filter="true" data-filter-placeholder="Search collections..." data-inset="true" data-split-icon="gear">

        </ul>
    </div><!-- /content -->

    <div data-role='popup' id='book-options' data-theme='d'>
        <ul data-role="listview" data-inset="true" data-theme="d">
            <li data-role="divider" data-theme="e">Options</li>
            <li class="add-favorite"><a>Add Favorite</a></li>
            <li class="delete-book"><a>Delete</a></li>
        </ul>
    </div>

</div>

<!--Store-->
<div data-role="page" id="store">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#" data-icon="refresh" class="ui-btn-left" data-transition="fade" id="refresh-store">Refresh</a>
        <h1>Store</h1>
        <a href="#store-right-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-right" data-transition="fade">Menu</a>
    </div><!-- /header -->

    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" id="store-right-panel" data-theme="a">
        <ul data-role="listview" data-theme="a">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
            <li><a href="#downloading">Downloading...</a></li>
        </ul>
    </div>

    <div data-role="content">
        <ul id="ib-store-list" data-role="listview" data-filter="true" data-filter-placeholder="Search store..." data-inset="true" data-split-icon="gear">

        </ul>
    </div><!-- /content -->

    <div data-role="footer" data-id="myFooter" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#collection" data-transition="fade">Collection</a></li>
                <li><a href="#store" class="ui-btn-active ui-state-persist">Store</a></li>
            </ul>
        </div>

    </div>

</div>


<!--Setting-->
<div data-role="page" id="setting">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#collection" data-icon="back" class="ui-btn-left" data-transition="fade" data-direction="reverse">Back</a>
        <h1>Setting</h1>

    </div><!-- /header -->
</div>

<!--Favorite-->
<div data-role="page" id="favorite">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#collection" data-icon="back" class="ui-btn-left" data-transition="fade" data-direction="reverse">Back</a>
        <h1>Favorite</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul id="ib-favorite-list" data-role="listview" data-filter="true" data-filter-placeholder="Search favorite..." data-inset="true" data-split-icon="delete">
        </ul>
    </div>
</div>


<!--Bookmark-->
<div data-role="page" id="bookmark">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#collection" data-icon="back" class="ui-btn-left" data-transition="fade" data-direction="reverse">Back</a>
        <h1>Bookmark</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul id="ib-bookmark-list" data-role="listview" data-filter="true" data-filter-placeholder="Search Bookmark..." data-inset="true" data-split-icon="delete">

        </ul>
    </div>
</div>


<div data-role="page" id="downloading">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a href="#store" data-icon="back" class="ui-btn-left" data-transition="fade" data-direction="reverse">Back</a>
        <h1>Downloading</h1>
    </div>

    <div data-role="content">
        <ul id="ib-downloading-list" data-role="listview" data-inset="true" data-split-icon="delete">

        </ul>
    </div>
</div>

<script src="init.js"></script>
</body>
</html>